<!DOCTYPE html>
<html>
    <head>
        <title>GitHub Profile Summary Cards</title>
        <link
            href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
            rel="stylesheet"
        />
        <link
            href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
            rel="stylesheet"
        />
        <link
            href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
            rel="stylesheet"
        />
        <meta
            charset="UTF-8"
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
        />
    </head>
    <body>
        <style>
            .github-corner:hover .octo-arm {
                animation: octocat-wave 560ms ease-in-out;
            }
            @keyframes octocat-wave {
                0%,
                100% {
                    transform: rotate(0);
                }
                20%,
                60% {
                    transform: rotate(-25deg);
                }
                40%,
                80% {
                    transform: rotate(10deg);
                }
            }
            @media (max-width: 500px) {
                .github-corner:hover .octo-arm {
                    animation: none;
                }
                .github-corner .octo-arm {
                    animation: octocat-wave 560ms ease-in-out;
                }
            }
        </style>
        <div id="app">
            <v-app>
                <v-main>
                    <v-container class="py-8 px-6" width="950px">
                        <a
                            href="https://github.com/vn7n24fzkq/github-profile-summary-cards"
                            class="github-corner"
                            aria-label="View source on GitHub"
                        >
                            <svg
                                width="80"
                                height="80"
                                viewBox="0 0 250 250"
                                style="
                                    fill: #151513;
                                    color: #fff;
                                    position: absolute;
                                    top: 0;
                                    border: 0;
                                    right: 0;
                                "
                                aria-hidden="true"
                            >
                                <path
                                    d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
                                ></path>
                                <path
                                    d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                                    fill="currentColor"
                                    style="transform-origin: 130px 106px"
                                    class="octo-arm"
                                ></path>
                                <path
                                    d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                                    fill="currentColor"
                                    class="octo-body"
                                ></path>
                            </svg>
                        </a>
                        <v-content>
                        <v-row justify="center" no-gutters>
                            <v-col cols="10">
                                <div
                                    class="title font-weight-black text-center"
                                >
                                    GitHub Profile Summary Cards
                                </div>
                            </v-col>
                        </v-row>
                        <v-row justify="center" no-gutters>
                            <v-col cols="5">
                                <!-- Place this tag where you want the button to render. -->
                                <v-row
                                    justify="center"
                                    no-gutters
                                    style="margin-top: 16px;"
                                >
                                        <a
                                            class="github-button"
                                            href="https://github.com/vn7n24fzkq/github-profile-summary-cards"
                                            data-size="large"
                                            data-show-count="true"
                                            aria-label="Star vn7n24fzkq/github-profile-summary-cards on GitHub"
                                            >Star</a
                                        >
                                </v-row>
                            </v-col>
                            <v-col cols="5">
                                <v-row
                                    justify="center"
                                    no-gutters
                                >
                                <v-switch
                                    v-model="$vuetify.theme.dark"
                                    inset
                                    label="Dark Mode"
                                    persistent-hint
                                ></v-switch>
                                </v-row>
                            </v-col>
                        </v-row>
                        <v-row justify="center" no-gutters>
                            <v-col cols="10" sm="5">
                                <v-text-field
                                    v-model="username"
                                    value="Your username"
                                    label="username"
                                    outlined
                                ></v-text-field>
                            </v-col>
                            <v-col cols="10" sm="5">
                                <v-select
                                    :items="themes"
                                    v-model="theme"
                                    @change="selectTheme"
                                    label="theme"
                                    hint="Select theme"
                                    outlined
                                ></v-select>
                            </v-col>
                        </v-row>
                        <v-row justify="center" no-gutters>
                            <v-col cols="10">
                                <v-btn
                                    width="100%"
                                    color="green"
                                    @click="submit"
                                >
                                    Submit
                                </v-btn>
                            </v-col>
                        </v-row>
                        <v-row justify="center" no-gutters>
                            <v-col cols="10">
                                <v-card outlined>
                                    <v-img :src="profileDetailSource"></v-img>
                                    <v-card-text class="text--primary">
                                        <div>Markdown Usage</div>
                                        <code>
                                            ![]({{ profileDetailSource }})
                                        </code>
                                    </v-card-text>
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row justify="center" no-gutters>
                            <v-col cols="10" sm="5">
                                <v-card outlined>
                                    <v-img :src="repoLanguageSource"></v-img>
                                    <v-card-text class="text--primary">
                                        <div>Markdown Usage</div>
                                        <code>
                                            ![]({{ repoLanguageSource }})
                                        </code>
                                    </v-card-text>
                                </v-card>
                            </v-col>
                            <v-col cols="10" sm="5">
                                <v-card outlined>
                                    <v-img :src="commitLanguageSource"></v-img>
                                    <v-card-text class="text--primary">
                                        <div>Markdown Usage</div>
                                        <code>
                                            ![]({{ commitLanguageSource }})
                                        </code>
                                    </v-card-text>
                                </v-card>
                            </v-col>
                        </v-row>
                        <v-row justify="center" no-gutters>
                            <v-col cols="10" sm="5">
                                <v-card outlined>
                                    <v-img :src="statsSource"></v-img>
                                    <v-card-text class="text--primary">
                                        <div>Markdown Usage</div>
                                        <code> ![]({{ statsSource }}) </code>
                                    </v-card-text>
                                </v-card>
                            </v-col>
                            <v-col cols="10" sm="5">
                                <v-card outlined>
                                    <v-img :src="productiveTimeSource"></v-img>
                                    <v-card-text class="text--primary">
                                        <div>Markdown Usage</div>
                                        <code>
                                            ![]({{ productiveTimeSource }})
                                        </code>
                                    </v-card-text>
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>
                    <v-footer padless>
                        <v-col class="text-center" cols="12">
                            <strong>GitHub Profile Summary Cards</strong>
                        </v-col>
                    </v-footer>
                </v-main>
            </v-app>
        </div>
        <script async defer src="https://buttons.github.io/buttons.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                vuetify: new Vuetify(),
                data: {
                    themes: ['default'],
                    username: 'vn7n24fzkq',
                    theme: 'default',
                    profileDetailSource: '',
                    repoLanguageSource: '',
                    commitLanguageSource: '',
                    statsSource: '',
                    productiveTimeSource: '',
                    baseURL: `http://${window.location.host}`,
                },
                created() {
                    axios
                        .get(
                            `/api/theme`
                        )
                        .then((response) => {
                            this.themes = response.data.themes;
                            this.updateAllCards();
                        });
                },
                methods: {
                    submit: function () {
                        this.updateAllCards();
                    },
                    selectTheme: function (theme) {
                        this.theme = theme;
                    },
                    updateAllCards: function () {
                        this.profileDetailSource = `${this.baseURL}/api/cards/profile-details?username=${this.username}&theme=${this.theme}`;
                        this.repoLanguageSource = `${this.baseURL}/api/cards/repos-per-language?username=${this.username}&theme=${this.theme}`;
                        this.commitLanguageSource = `${this.baseURL}/api/cards/most-commit-language?username=${this.username}&theme=${this.theme}`;
                        this.statsSource = `${this.baseURL}/api/cards/stats?username=${this.username}&theme=${this.theme}`;
                        this.productiveTimeSource = `${this.baseURL}/api/cards/productive-time?username=${this.username}&theme=${this.theme}&utcOffset=8`;
                    },
                },
            });
        </script>
    </body>
</html>
